<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="left" label-width="0px" class="demo-ruleForm login-container">
    <h3 class="title">店铺入驻</h3>
    <el-form-item prop="shopName">
      <el-input type="text" v-model="ruleForm.shopName" auto-complete="off" placeholder="店铺名称"></el-input>
    </el-form-item>
    <el-form-item prop="landline">
      <el-input type="password" v-model="ruleForm.landline" auto-complete="off" placeholder="座机"></el-input>
    </el-form-item>
    <el-cascader
        placeholder="店铺地址"
        size="large"
        :options="pcaTextArr"
        v-model="ruleForm.position">
    </el-cascader>
<!--    <el-form-item prop="logo">-->
<!--      <el-input type="password" v-model="ruleForm.logo" auto-complete="off" placeholder="店铺logo"></el-input>-->
<!--    </el-form-item>-->
    <el-form-item prop="logo" style="width: 400px" >
      <!--<el-input type="text" v-model="employee.logo" auto-complete="off" placeholder="请输入logo！"></el-input>-->
      <el-upload
          class="upload-demo"
          action="https://ronghuanet-lyh.oss-cn-chengdu.aliyuncs.com"
          :data="uploadData"
          :before-upload="beforeUpload"
          :on-success="handleSuccess"
          :file-list="fileList"
          list-type="picture">
        <el-button size="small" type="primary">点击上传logo</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </el-form-item>
    <el-divider></el-divider>
    <h3 class="title">管理员账户设置</h3>
    <el-form-item prop="phone">
      <el-input type="text" v-model="ruleForm.phone" auto-complete="off" placeholder="手机号"></el-input>
    </el-form-item>
    <el-form-item prop="email">
      <el-input type="password" v-model="ruleForm.email" auto-complete="off" placeholder="邮箱"></el-input>
    </el-form-item>
    <el-form-item prop="account">
      <el-input type="text" v-model="ruleForm.account" auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item prop="checkPass">
      <el-input type="password" v-model="ruleForm.checkPass" auto-complete="off" placeholder="密码"></el-input>
    </el-form-item>
    <el-form-item style="width:100%;">
      <el-button type="success" style="width:70%;" @click.native.prevent="handleSubmit" :loading="entry">提交</el-button>
      <el-button style="width:20%;" @click.native.prevent="handleReset">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
  //import { requestLogin } from '../api/api';
  //import NProgress from 'nprogress'
  import {pcaTextArr} from "element-china-area-data"
  export default {
    data() {
      return {
        //保存的图片
        fileList:[],
        uploadData: {  //提交到OSS的参数
          policy: '',
          signature: '',
          key: '',
          ossaccessKeyId: '',
          dir: '',
          host: ''
        },
        pcaTextArr,//中国省市区三级联动纯文字
        entry: false,
        ruleForm: {
          shopName: '',
          landline: '',
          position: [],
          logo: '',
          account: '',
          phone: '',
          email: '',
          checkPass: ''
        },
        rules: {
          shopName: [
            { required: true, message: '请输入店铺名称', trigger: 'blur' },
            //{ validator: validaePass }
          ],
          landline: [
            { required: true, message: '请输入座机号', trigger: 'blur' },
            //{ validator: validaePass }
          ],
          position: [
            { required: true, message: '请输入店铺地址', trigger: 'blur' },
            //{ validator: validaePass }
          ],
          account: [
            { required: true, message: '请输入管理员账号', trigger: 'blur' },
            //{ validator: validaePass }
          ],
          phone: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            //{ validator: validaePass }
          ],
          email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            //{ validator: validaePass }
          ],
          checkPass: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            //{ validator: validaePass2 }
          ]
        }
      };
    },
    methods: {
      getUUID() {
        var s = [];
        var hexDigits = "0123456789abcdef";
        for (var i = 0; i < 36; i++) {
          s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
        }
        s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
        s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
        s[8] = s[13] = s[18] = s[23] = "-";
        var uuid = s.join("");
        return uuid;
      },
      async beforeUpload(){
        await this.$http.get("/services/common/commons/sign").then(res=>{
          //设置相关的参数
          var resultObj = res.data.data;
          this.uploadData.policy = resultObj.policy;
          this.uploadData.signature = resultObj.signature;
          this.uploadData.ossaccessKeyId = resultObj.accessid;
          //上传的文件名，使用UUID处理一下
          this.uploadData.key = resultObj.dir + '/'+this.getUUID()+'_${filename}';
          this.uploadData.dir = resultObj.dir;
          this.uploadData.host = resultObj.host;
        });
      },
      //文件上传成功回调
      handleSuccess(res, file, fileList){
        //上传的完整的文件地址
        var urlPath = this.uploadData.host + '/' + this.uploadData.key.replace("${filename}",file.name) ;
        this.saveForm.pic = urlPath;
        this.$message({message: '上传成功，图片地址：'+this.saveForm.pic, type: 'success' });
      },
      handleReset() {
        this.$refs.ruleForm.resetFields();
      },
      handleSubmit(ev) {
        var _this = this;
        this.$refs.ruleForm2.validate((valid) => {
          if (valid) {
            //_this.$router.replace('/table');
            this.entry = true;
            //NProgress.start();
            let loginParams = { username: this.ruleForm.account, password: this.ruleForm.checkPass };
            this.$http.post("/services/sys")
            sessionStorage.setItem('user', JSON.stringify(loginParams));
            this.$router.push({ path: '/echarts' });
            loginParams = { username: this.ruleForm.account, password: this.ruleForm.checkPass };
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    },
    mounted() {
      console.log(this.ruleForm)
    }
  }
</script>

<style lang="scss" scoped>
  .login-container {
    /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    .title {
      margin: 0px auto 40px auto;
      text-align: center;
      color: #505458;
    }
    .remember {
      margin: 0px 0px 35px 0px;
    }
  }
</style>